<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约下单</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="assets/common.css">
    <style>
        .package-option {
            border: 1px solid #eaeaea;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
            transition: all 0.2s;
            cursor: pointer;
        }
        .package-option.selected {
            border-color: #fd79a8;
            background-color: #ffeef4;
        }
        .package-option.selected .check-icon {
            color: #fd79a8;
        }
        .check-icon {
            color: #ddd;
        }
        .time-slot {
            border: 1px solid #eaeaea;
            border-radius: 6px;
            padding: 8px 12px;
            margin-right: 8px;
            margin-bottom: 8px;
            font-size: 14px;
            cursor: pointer;
            display: inline-block;
        }
        .time-slot.selected {
            border-color: #fd79a8;
            background-color: #ffeef4;
            color: #fd79a8;
        }
        .time-slot.disabled {
            background-color: #f5f5f5;
            color: #aaa;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="wechat-container">
        <div class="wechat-header">
            <div class="wechat-back">
                <i class="fas fa-chevron-left"></i>
            </div>
            预约拍摄
        </div>
        
        <div class="wechat-content">
            <!-- Photographer Info -->
            <div class="wechat-card flex items-center gap-3">
                <div class="wechat-avatar-sm">
                    <i class="fas fa-user"></i>
                </div>
                <div>
                    <div class="font-bold">林夕摄影</div>
                    <div class="text-xs text-gray">专注二次元/COSER写真摄影</div>
                </div>
            </div>
            
            <!-- Package Selection -->
            <h3 class="font-bold mt-4 mb-2">选择套餐</h3>
            
            <div class="package-option selected">
                <div class="flex justify-between">
                    <div class="font-bold">基础写真套餐</div>
                    <div class="check-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                </div>
                <div class="text-sm text-gray mt-1">15张精修照片，包含电子版</div>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-pink font-bold">¥199</div>
                    <div class="text-xs text-gray">拍摄时长：约30分钟</div>
                </div>
            </div>
            
            <div class="package-option">
                <div class="flex justify-between">
                    <div class="font-bold">高级写真套餐</div>
                    <div class="check-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                </div>
                <div class="text-sm text-gray mt-1">30张精修照片，包含电子版与精美相册</div>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-pink font-bold">¥299</div>
                    <div class="text-xs text-gray">拍摄时长：约60分钟</div>
                </div>
            </div>
            
            <div class="package-option">
                <div class="flex justify-between">
                    <div class="font-bold">豪华写真套餐</div>
                    <div class="check-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                </div>
                <div class="text-sm text-gray mt-1">50张精修照片，包含电子版与精美相册，送8寸放大照片3张</div>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-pink font-bold">¥399</div>
                    <div class="text-xs text-gray">拍摄时长：约90分钟</div>
                </div>
            </div>
            
            <!-- Time Selection -->
            <h3 class="font-bold mt-4 mb-2">选择时间</h3>
            <div class="mb-4">
                <div class="flex items-center mb-2">
                    <div class="font-bold text-sm mr-4">6月15日 周六</div>
                    <div class="text-xs text-gray">今天</div>
                </div>
                <div>
                    <div class="time-slot disabled">09:00</div>
                    <div class="time-slot disabled">09:30</div>
                    <div class="time-slot disabled">10:00</div>
                    <div class="time-slot disabled">10:30</div>
                    <div class="time-slot">11:00</div>
                    <div class="time-slot selected">11:30</div>
                    <div class="time-slot">12:00</div>
                    <div class="time-slot">12:30</div>
                </div>
            </div>
            
            <div class="mb-4">
                <div class="flex items-center mb-2">
                    <div class="font-bold text-sm mr-4">6月16日 周日</div>
                    <div class="text-xs text-gray">明天</div>
                </div>
                <div>
                    <div class="time-slot">09:00</div>
                    <div class="time-slot">09:30</div>
                    <div class="time-slot">10:00</div>
                    <div class="time-slot">10:30</div>
                    <div class="time-slot">11:00</div>
                    <div class="time-slot">11:30</div>
                    <div class="time-slot">12:00</div>
                    <div class="time-slot">12:30</div>
                </div>
            </div>
            
            <!-- Contact Info -->
            <h3 class="font-bold mt-4 mb-2">联系信息</h3>
            <div>
                <label class="wechat-label">姓名</label>
                <input type="text" class="wechat-input" placeholder="请输入您的姓名">
                
                <label class="wechat-label">手机号码</label>
                <input type="tel" class="wechat-input" placeholder="请输入您的手机号码">
                
                <label class="wechat-label">COSPLAY角色 (可选)</label>
                <input type="text" class="wechat-input" placeholder="请输入您的角色名称">
                
                <label class="wechat-label">备注 (可选)</label>
                <textarea class="wechat-textarea" placeholder="有什么特殊需求可以在这里告诉我们"></textarea>
            </div>
            
            <!-- Order Summary -->
            <div class="wechat-card mt-4">
                <h3 class="font-bold mb-2">订单摘要</h3>
                <div class="flex justify-between text-sm mb-2">
                    <div>套餐</div>
                    <div>基础写真套餐</div>
                </div>
                <div class="flex justify-between text-sm mb-2">
                    <div>时间</div>
                    <div>6月15日 11:30</div>
                </div>
                <div class="wechat-divider"></div>
                <div class="flex justify-between font-bold">
                    <div>总价</div>
                    <div class="text-pink">¥199</div>
                </div>
            </div>
            
            <!-- Submit Button -->
            <button class="wechat-btn mt-4">
                确认预约
            </button>
        </div>
    </div>
</body>
</html> 